<template>
    <div class="adduser">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>编辑用户</span>
                <el-button @click="$router.go(-1)" style="float: right; padding: 3px 0" type="text">返回</el-button>
            </div>
            <el-form ref="addform" :label-position="lablePosition" label-width="80px" :model="editUser">
                <el-form-item label="用户名称" prop="username">
                    <el-input disabled v-model="editUser.username"></el-input>
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="editUser.email" placeholder="选填"></el-input>
                </el-form-item>
                <el-form-item label="手机号">
                    <el-input v-model="editUser.mobile" placeholder="选填"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="editUserFn" type="success">更新信息</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import { getUserByidApi, putUpdateUserApi } from '@/api/usersapi/index'
export default {
    data() {
        return {
            lablePosition: 'right',
            editUser: {
                username: '',
                email: '',
                mobile: ''
            },
            // rules用来保存需要非空验证的数据
        };
    },
    methods: {
        async editUserFn() {
            const res = await putUpdateUserApi(this.editUser);
            if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
            this.$message.success(res.meta.msg);
            this.$router.push('/layout/users')
        },
        async getUserInfoById() {
            const res = await getUserByidApi(this.$route.params.userid);
            this.editUser = res.data
        }
    },
    created() {
        this.getUserInfoById()
    },
}
</script>

<style lang="scss" scoped></style>